<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        canvas:focus {
            outline: none;
        }
        canvas {
            width: 100%;
            box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18), 0 4px 15px 0 rgba(0,0,0,0.15);
        }
        body {
            background-image: url(../img/bg.gif);
            display: flex;
            min-height: 100vh;
            flex-direction: column;
            position: relative;
        }
        main {
            display: flex;
            flex: 1 0 auto;
            align-items: center;
            justify-content: center;
            margin-top: 1rem!important;
            margin-bottom: 1rem!important;
        }
        textarea {
            font-family: "courier", "consolas"!important;
        }
        .mode-select-img1 {
            position: absolute;
            left: 76%;
            top: 60%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            display: none;
            z-index: 10;
        }
		.mode-select-img2 {
		    position: absolute;
		    left: 76%;
		    top: 70%;
		    transform: translate(-50%, -50%);
		    cursor: pointer;
		    display: none;
		    z-index: 10;
		}
        .choosing-mode .mode-select-img1{
            display: block;
        }
		.choosing-mode .mode-select-img2{
		    display: block;
		}
    </style>
</head>
<body>
    <div class="container">
        <canvas id="canv" class="canvas-container" width="990px" height="660px"></canvas>
        <img src="../img/p1vsp2.png" alt="" class="mode-select-img1" id="p1vsp2">
		<img src="../img/p1vsAI.png" alt="" class="mode-select-img2" id="p1vsai">
    </div>
    <script src="../js/main.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
</body>
</html>